<template>
  <BorderBox8 style="width: 100%; height: 100%">
    <div ref="chartRef" style="width: 100%; height: 100%"></div>
  </BorderBox8>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { BorderBox8 } from "@kjgl77/datav-vue3";
const chartRef = ref(null);
// 存储 ECharts 实例
let chartInstance = null;
const initChart = () => {
  if (chartRef.value) {
    // 初始化 echarts 实例
    chartInstance = echarts.init(chartRef.value);

    // 配置项
    const option = {
      title: {
        text: "Equipment Downtime Analysis",

        left: "center",
        textStyle: {
          color: "#67e0e3", // 蓝色
          fontSize: "24px",
        },
        top: "5%",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "15%",
        textStyle: {
          color: "#fff", // 深灰色
          fontSize: "18px",
        },
      },
      label: {
        position: "inside", // 数值显示在内部
        formatter: "{c}", // 格式化数值百分比输出
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: [20, 80],
          top: "20%",
          roseType: "area",
          label: {
            position: "inside", // 数值显示在内部
            formatter: "{c}%", // 格式化数值百分比输出
          },
          data: [
            { value: 10, name: "Function1" },
            { value: 15, name: "Function2" },
            { value: 55, name: "Function3" },
            { value: 20, name: "Function4" },
          ],
          itemStyle: {
            borderRadius: 8,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    // 使用配置项渲染图表
    chartInstance.setOption(option);
  }
};

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
  chartInstance?.resize();
};

// 组件挂载后执行初始化
onMounted(() => {
  initChart();
  // 监听窗口大小变化事件以支持响应式
  window.addEventListener("resize", resizeChart);
});

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
  chartInstance?.dispose(); // 销毁 echarts 实例
});
</script>
